<template>
	<view>
		<view class="list-info">
			
			<view class="background">
				<image :src="playlistInfo.pic" mode="scaleToFill"></image>	
			</view>
			
			<view class="pic-info u-f">
				<image v-if="aid"  style="position: absolute;top: 0; left: 25upx;"
				src="../../../static/icon/a6l.png" mode="widthFix"></image>
				<image :src="playlistInfo.pic" mode="scaleToFill" ></image>
				<view class="info">
					<view class="name">{{playlistInfo.name}}</view>
					<view class="author u-f-ac">
						<image mode="widthFix"  :src="playlistInfo.authorpic"></image>
						<text>{{playlistInfo.author}}</text>
					</view>
				</view>
			</view>
			
			<view class="row u-f">
				<view @tap="tocomment" :data-index="index" class="item u-f-ajc" 
				v-for="(item,index) in rowinfo" :key="index">
					<view class="pic">
						<image mode="widthFix" :src="item.pic"></image>
					</view>
					<view class="text">{{item.text}}</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			playlistInfo:Object,
			aid:Number
		},
		data() {
			return {
				rowinfo:[ 
					{
						pic:'../../../static/icon/pinglun.png',
						text:'评论',
						url:"../comment/comment"
					},
					{
						pic:'../../../static/icon/shouchang.png',
						text:'收藏'
					},
					{
						pic:'../../../static/icon/fenxiang.png',
						text:'分享'
					}
				],
			}
		},
		methods: {
			//跳转去评论页面
			tocomment(e){ 
				let {index}=e.currentTarget.dataset;
				if(index==0){
					uni.navigateTo({
						url:this.rowinfo[0].url+'?playlistId='+this.playlistInfo.playlistId
					})
				}
			}
			
		}
	}
</script>

<style lang="less" scoped>
	.list-info{
		position: relative;
		height: 500upx;
		.background{
			position: absolute;
			z-index: 0;
			height: 500upx;
			left: 0;
			right: 0;
			overflow: hidden;
			image{
				position: relative;
				top:-7%;
				left: -7%;
				width: 115%;
				height: 115%;
				filter: blur(25upx);
			}
		}
		.pic-info{
			position: relative;
			top:70upx;
			left:70upx;
			image{
				width: 220upx;
				height: 220upx;
			}
			.info{
				max-width: 470upx;
				padding: 10upx 10upx 10upx 30upx;
				.name{
					font-size: 34upx;
					color: #FFFFFF;
					font-weight: bold;
				}
				.author{
					padding-top: 20upx;
					image{
						width: 55upx;
						border-radius: 50%;
					}
					text{
						margin-left: 5upx;
						font-size: 22upx;
						color: #FFFFFF;
					}
					
				}	
			}
		}
		.row{
			position: absolute;
			bottom: 10upx;
			right: 0;
			left: 0;
			z-index: 1;
			.item{
				width: 33.33%;
				flex-direction: column;
				image{
					width: 100upx;
				}
				.text{
					position: relative;
					top:-30upx;
					color: #FFFFFF;
				}
				
			}
		}
	}
	
</style>
